import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input, Checkbox,message } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';

import styles from './adduser.less';

const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;


const UsersCreateForm = Form.create()(
	(props) => {
		const { visible, onCancel, onCreate, form,roleslist } = props;
		const { getFieldDecorator } = form;
		function checkPassword (rule, value, callback){
			console.log('rule>>>>',rule,'value>>',value)
			const { form } = props;
			if (value && value !== form.getFieldValue('password')) {
				callback('两次密码不一致,重新输入!');
			} else {
				callback();
			}
		}
		function checkConfirm (rule, value, callback){
	    const {form} = props;
	    if (value) {
	      form.validateFields(['confirm'], { force: true });
	    }
	    callback();
	  }
		function onChange(checkedValues) {
			console.log('checked = ',checkedValues, checkedValues.length);
			if(checkedValues.length == 0){
				message.warning('请选择用户职位');
			}
		}
		return (
			visible ?
				<Modal
					className={`${styles.addUserItem} add-panel`}
					visible={visible}
					title="新增用户"
					okText="提交"
					cancelText="取消"
					onCancel={onCancel}
					onOk={onCreate}
				>
				<Form layout="vertical">
					<FormItem label="用户名">
						{getFieldDecorator('username', {
							rules: [
							{ whitespace: true, message: '请输入数字和字母!' },
								{ required: true, whitespace: true, message: '请输入用户名!' },
							],
						})(
							<Input />,
							)}
					</FormItem>
					<FormItem label="姓名" >
						{getFieldDecorator('name', {
							rules: [
								{ required: true, message: '请输入姓名!' },
							],
						})(
							<Input />,
						)}
					</FormItem>

					<FormItem
						label="密码"
					>
						{getFieldDecorator('password', {
							rules: [{
								required: true, message: '请输入密码!',
							}, {
								pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z@#$%&*_]+$)(?![a-z0-9]+$)(?![a-z@#$%&*_]+$)(?![0-9@#$%&*_]+$)[a-zA-Z0-9@#$%&*_]{8,20}$/, message: '密码长度8-20，且包含数字、大小写、支持特殊字符(@,#,$,%,&,*,_)!' 
							},{
								validator: checkConfirm,
							}],
						})(
							<Input type="password" />
						)}
					</FormItem>
					<FormItem
						label="确认密码"
					>
						{getFieldDecorator('confirm', {
							rules: [{
								required: true, message: '请再次输入密码!',
							},{
								pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z@#$%&*_]+$)(?![a-z0-9]+$)(?![a-z@#$%&*_]+$)(?![0-9@#$%&*_]+$)[a-zA-Z0-9@#$%&*_]{8,20}$/, message: '密码长度8-20，且包含数字、大小写、支持特殊字符(@,#,$,%,&,*,_)!' 
							} ,{
								validator: checkPassword,
							}],
						})(
							<Input type="password"  />
						)}
					</FormItem>

					<FormItem label="联系方式">
						{getFieldDecorator('mobile', {
							rules: [
								{ whitespace: true, pattern: /^((0\d{2,3}-\d{7,8})|(1[23456789]\d{9}))$/, message: '格式错误!' },
								{ required: true, whitespace: true, message: '请输入联系方式!' },
							],
						})(
							<Input />,
							)}
					</FormItem>
					<FormItem label="邮箱">
						{getFieldDecorator('email', {
							rules: [
								{ whitespace: true, pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/, message: '请输入正确邮箱地址!' },
								{ required: true, whitespace: true, message: '请输入邮箱地址!' },
							],
						})(
							<Input/>,
							)}
					</FormItem>
					<FormItem label="用户职能">
						{getFieldDecorator('Checkbox',
							{
								rules: [
									{ required: true,type: 'array', message: '请选择用户职能!' },
								],
							},
						)(
							<CheckboxGroup options={roleslist} onChange={onChange} />
							)}
					</FormItem>
				</Form>
			</Modal> : null
		);
	},
);
const mapStateToProps = state => ({
	list: state.accoutuser.list,
	roleslist:state.accoutuser.roleslist
});
const mapDispatchToProps = {
	getUsersList: query => ({
		type: 'accoutuser/getUsersList',
		payload: query || {},
	}),
	getUsersAdd: query => ({
		type: 'accoutuser/getUsersAdd',
		payload: query || {},
	}),
};

@connect(mapStateToProps, mapDispatchToProps)
class Adduser extends PureComponent {

	static propTypes = {
		form: PropTypes.object.isRequired,
		getUsersAdd: PropTypes.func.isRequired,
	}

	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			confirmDirty: false,
			modalHeight: 0,
		};
	}

	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-panel .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.6}px`;
		}
	}

	@autobind
	showModal() {
		this.setState({ visible: true });
	}

	@autobind
	handleCancel() {
		this.setState({ visible: false });
	}

	@autobind
	handleCreate() {
		const form = this.form;
		const { getUsersList, getUsersAdd } = this.props;
		form.validateFields((err, values) => {
			if (err) {
				return;
			}
			form.resetFields();
			this.setState({ visible: false });
			const data = values.Checkbox;
			const authorities = new Array();
			for(let i=0;i<data.length;i++){
				authorities.push({'authority':data[i].toString()})
			}
			delete values.Checkbox
			delete values.confirm
				getUsersAdd({
				...values,
				authorities
			});
		});

	}

	@autobind
	saveFormRef(form) {
		this.form = form;
	}

	render() {
		const { list,page,roleslist } = this.props;
		console.log('roleslist>>',roleslist)
		return (
			<div >
				<Button type="primary" onClick={this.showModal} >新增用户</Button>
				<UsersCreateForm
					roleslist={roleslist}
					list={list}
					page={page}
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
				/>
			</div>
		);
	}
}
export default Form.create({
})(Adduser);
